<template>
  <div style="padding: 10px">
    <el-tree node-key="uuid"
             :data="treeData"
             :props="defaultProps"
             default-expand-all
             highlight-current
             :expand-on-click-node="false"
             @node-contextmenu="handleMenu"
             @node-click="handleNodeClick">

    </el-tree>
  </div>
</template>
<script>
  import vpd from '../../mixins/vpd';
  import widgets from '../../../widgets';
  import Style from "../panel/style";

  export default {
    components: {Style},
    mixins: [vpd],
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    computed: {
      widgetStore() {
        return this.$vpd.state.widgets;
      },
      treeData() {
        const items = this.widgetStore
          .filter(item => !item.parent)
          .map(item => {
            return {
              uuid: item.uuid,
              type: item.type,
              label: this.getWidgetName(item),
              children: this.getChildren(item.uuid)
            };
          });

        return [{
          uuid: -1,
          label: '页面',
          children: items
        }]
      },

    },
    methods: {
      getChildren(parentId) {
        return this.widgetStore
          .filter(item => item.parent === parentId)
          .map(item => {
            return {
              uuid: item.uuid,
              type: item.type,
              label: this.getWidgetName(item)
            };
          });
      },
      getWidgetName(item) {
        return widgets.getTitle(item.type) + '[' + item.uuid + ']';
      },
      // 设置选中元素
      selectItem(item) {
        this.$vpd.commit('select', {
          uuid: item.uuid
        })
      },
      handleNodeClick(item) {
        this.selectItem(item);
      },
      handleMenu(e, item, node) {
        this.$vpd.$emit('vpd-contextmenu', {
          event: e,
          item: item
        })
      }
    }
  }
</script>
<style lang="scss">
  .custom-tree-node {
    font-size: 14px;
  }
</style>
